<!--主页-->
<template>
    <div>
        <el-container>
            <!--侧边栏-->
            <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
                <div style="height: 60px; color: white; display: flex;align-items: center; justify-content: center">
                    <img src="../assets/logo.png" alt="" style="width: 40px; height: 40px">
                    <span class="logo-title" v-show="!isCollapse">学科竞赛管理系统</span>
                </div>

                <el-menu :default-openeds="['info','base']" :collapse="isCollapse" :collapse-transition="false" router background-color="#001529"
                         text-color="rgba(255,255,255,0.65)" active-text-color="#fff"
                         style="border: none" :default-active="$route.path">
                    <!--一级菜单-->
                    <el-menu-item index="/home">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">系统首页</span>
                    </el-menu-item>
                    <!--二级菜单-->
                    <el-submenu index="base" v-if="user.role === '管理员'">
                        <template slot="title">
                            <i class="el-icon-s-tools"></i>
                            <span>基础设置</span>
                        </template>
                        <el-menu-item index="/sign">竞赛类型设置</el-menu-item>
                        <el-menu-item index="/faculty">学校学部设置</el-menu-item>
                    </el-submenu>
                    <!--一级菜单-->
                    <el-menu-item index="/user" v-if="user.role === '管理员'">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <!--二级菜单-->
                    <el-submenu index="info" >
                        <template slot="title">
                            <i class="el-icon-news"></i>
                            <span>竞赛</span>
                        </template>
                        <el-menu-item index="/news">竞赛信息</el-menu-item>
                        <el-menu-item index="/enroll" v-if="user.role === '学生'">竞赛报名</el-menu-item>
                        <el-menu-item index="/enrollmanage" v-if="user.role === '管理员'|| user.role === '教师'">报名管理</el-menu-item>
                        <el-menu-item index="/notice" v-if="user.role === '管理员'">公告管理</el-menu-item>
                    </el-submenu>
                    <!--二级菜单-->
                    <el-submenu index="info" >
                        <template slot="title">
                            <i class="el-icon-notebook-2"></i>
                            <span>成绩管理</span>
                        </template>
                        <el-menu-item index="/setGrade" v-if="user.role === '管理员'|| user.role === '教师'">成绩评分</el-menu-item>
                        <el-menu-item index="/grade" v-if="user.role === '学生'">成绩查询</el-menu-item>
                        <el-menu-item index="/gradeManage" v-if="user.role === '管理员'|| user.role === '教师'">成绩查询</el-menu-item>
                    </el-submenu>
                    <!--一级菜单-->
                    <el-menu-item index="/payManage" >
                        <i class="el-icon-notebook-2"></i>
                        <span slot="title">支付信息</span>
                    </el-menu-item>
                    <!--一级菜单-->
                    <el-menu-item index="/logs" v-if="user.role === '管理员'">
                        <i class="el-icon-c-scale-to-original"></i>
                        <span slot="title">系统日志</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <!--头部区域-->
                <el-header>

                    <!--收缩菜单栏按钮-->
                    <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
                    <!--面包屑导航-->
                    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
                        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!--头部区域-->
                    <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: end">
                        <i class="el-icon-quanping" style="font-size: 26px" @click="hangFull"></i>
                        <el-dropdown placement="bottom">
                            <div style="display: flex;align-items: center; cursor: default">
                                <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px">
                                <span>{{user.role}}-{{user.username}}</span>
                            </div>
                            <!--下拉菜单-->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                </el-header>

                <!--主体区域-->
                <el-main>
                    <router-view @update:user="updateUser"/>
                </el-main>
            </el-container>

        </el-container>

    </div>
</template>

<script>
    export default {
        name: 'HomeView',
        data() {
            return {
                isCollapse: false,  //默认不收缩
                asideWidth: '200px',
                collapseIcon: 'el-icon-s-fold',
                user: JSON.parse(localStorage.getItem('honey-user') || '{}'),//获取token
            }
        },
        mounted() {
        },
        methods: {
            updateUser(user){ //获取子组件传过来的数据 更新当前页面的数据
                this.user = JSON.parse(JSON.stringify(user)) //让父级的对象跟子级的对象毫无关联
            },
            logout() {
                localStorage.removeItem('honey-user')//退出登录后清除登录用户的token和用户数据
                this.$router.push('/login')
            },
            hangFull() {
                document.documentElement.requestFullscreen()
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse
                this.asideWidth = this.isCollapse ? '64px' : '200px'
                this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
            }
        }
    }
</script>

<style>

    /*  侧边栏  */
    /*二级菜单栏盒子之间间隔背景色统一*/
    .el-menu--inline {
        background-color: #000c17 !important; /*样式不起作用时就用'!important'*/
    }

    /*二级菜单栏盒子背景色统一*/
    .el-menu--inline .el-menu-item {
        background-color: #000c17 !important; /*样式不起作用时就用'!important'*/
        padding-left: 49px !important;
    }

    /*鼠标移动一级、二级菜单栏高亮*/
    .el-menu-item:hover, .el-submenu__title:hover {
        color: #fff !important;
    }

    /*鼠标移动到二级图标时高亮*/
    .el-submenu__title:hover i {
        color: #fff !important;
    }

    /*点击菜单内容时盒子变色*/
    .el-menu-item.is-active {
        background-color: #1890ff !important;
        border-radius: 10px !important; /*改为圆角*/
        width: calc(100% - 8px); /*周围空出部分间距*/
        margin-left: 4px; /*周围空出部分间距*/
    }

    .el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
        margin-left: -4px;
    }

    /*菜单盒子高度*/
    .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;
    }

    /*二级菜单盒子标签高度*/
    .el-submenu__title {
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-submenu .el-menu-item {
        min-width: 0 !important;
    }

    /*二级菜单高亮对齐*/
    .el-menu--inline .el-menu-item.is-active {
        padding-left: 45px !important;
    }

    /*二级菜单标签右边得下拉图标设置*/
    /*.el-submenu__icon-arrow{*/
    /*    margin-top: -5px;*/
    /*} 设置了和没有设置差不多 暂时去除备用*/

    .el-aside {
        transition: width .3s;
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35); /*侧边栏阴影*/
    }

    /*logo样式*/
    .logo-title {
        margin-left: 5px;
        font-size: 16px;
        transition: all .3s; /*动画*/
    }


    /*  头部  */
    .el-header {
        box-shadow: 2px 0 6px rgba(0, 21, 41, .35); /*头部阴影*/
        display: flex;
        align-items: center;
    }
</style>
